<template>
	<view class="play_box" >
		<view class="play_left" @click="songFn(`${songid}`,`${pmdata.songUrl}`)">
			<view class="paly_img">
				<image :src="pmdata.song_headUrl"
					mode=""></image>
			</view>
			<span>{{pmdata.songName}}-{{pmdata.singer}}</span>
		</view>
		<video :src="`https://music.163.com/song/media/outer/url?id=${pmdata.songUrl}.mp3`" class="music" name="media" :controls="false" @click="songFn(`${songid}`,`${pmdata.songUrl}`)" autoplay type="audio/mpeg"></video>
		<view class="paly_right">
			<uni-icons custom-prefix="iconfont" type="icon-bofang" size="28" class="pause_play" v-show="mid" @click="ppFn(false)"></uni-icons>
			<uni-icons custom-prefix="iconfont" type="icon-caozuo-bofang-zanting" size="30" class="pause_play" v-show="!mid" @click="ppFn(true)"></uni-icons>
			<uni-icons type="settings-filled" size="30"></uni-icons>
		</view>
	</view>
</template>

<script lang="ts">
	export default {
		name: "playMusic",
		props: {
			songId: {
				type: String
			}
		},
		data() {
			return {
				songid: this.songId as String,
				pmdata:{singer:'',songName:'',songUrl:'',song_headUrl:'',song_id:''},
				mid:false,
				curtimes:0,
			};
		},
		watch: {
			//使用watch来响应数据的变化，第一个参数为newVal新值，第二个参数oldVal为旧值
			songid: {		
				handler(newVal, oldVal) {
					if(newVal){
						uni.request({
							url: 'api/pmSong',
							data: {
								songId: newVal,
							},
							success: (res : any) => {
								this.pmdata=res.data.song[0];
							}
						}) 
					}
				},
				immediate: true,//初始化绑定时就会执行handler方法
				deep:true
			},

		},
		methods: {
			songFn(song_id : string,song_url:string) {
				this.curtimes = document.querySelector('.music').querySelector('video').currentTime;
				console.log(this.curtimes);
				uni.navigateTo({
					url: `/pages/index/lyric/lyric?song_id=${song_id}&song_url=${song_url}&time=${this.curtimes}`,
				})
			},
			ppFn(cc:boolean){
				this.mid=cc;
				let musibtn = document.querySelector('.music').querySelector('video');
				if(cc){
					(musibtn as HTMLVideoElement).pause();
				}else{
					(musibtn as HTMLVideoElement).play();
				}
				
			}
		}
	}
</script>

<style lang="scss">
	.play_box {
		background-color: #fff;
		//height: 100rpx;
		position: fixed;
		width: 100%;
		top: 1138rpx;
		display: flex;
		padding: 5rpx 0;
		justify-content: space-between;

		.music {
			//display: block;
			width: 300rpx;
			height: 100rpx;
			opacity: 0;
		}

		.play_left {
			display: flex;
			margin-left: 30rpx;
			align-items: center;

			.paly_img {
				width: 50rpx;
				height: 50rpx;
				border: 20rpx solid;
				border-radius: 50%;
				margin-right: 20rpx;

				image {
					width: 50rpx;
					height: 50rpx;
					border-radius: 50%;
				}

			}
			>span{
				font-size: 14rpx;
			}
		}

		.paly_right {
			margin-right: 30rpx;
			line-height: 80rpx;

			.pause_play {
				margin-right: 30rpx;
			}
		}
	}
</style>